import React from 'react'
import { string, element, func } from 'prop-types'
import { TabBarItemWrapper } from './styledTabbar'

export default function TabBarItem(props) {
  const {
    name,
    children, 
    icon, 
    activeIcon, 
    activeColor, 
    inactiveColor,
    selectedIndex,
    handleItemClick,
    to
  } = props

  return (
    <TabBarItemWrapper
      color={selectedIndex === name ? activeColor : inactiveColor}
      onClick={handleItemClick(to, name)}
    >
      {selectedIndex === name ? activeIcon : icon}
      <span>
        {children}
      </span>
    </TabBarItemWrapper>
  )
}

TabBarItem.propTypes = {
  name: string,
  children: string,
  icon: element,
  activeColor: string,
  inactiveColor: string,
  activeIcon: element,
  handleItemClick: func,
  to: string
}